const tbody = document.querySelector('tbody');

const addform = document.querySelector('#addModal form');

const updateform = document.querySelector('#updateModal form');






getStudentList()


tbody.addEventListener('click', function (e) {
    if (e.target.classList.contains('put')) {
        $('#updateModal').modal('show')
        const id = e.target.dataset.id
        axios.get('/student/one', { params: { id, } })
            .then(result => {
                console.log(result);

                const obj = result.data.data
                console.log(obj);

                for (const key in obj) {
                    const target = document.querySelector(`#updateModal [name=${key}]`);

                    if (key === 'sex') {

                        document.querySelector(`#updateModal [name=sex][value=${obj[key]}]`).checked = true;




                        continue

                    }

                    if (target) {
                        target.value = obj[key]
                    }

                }


                getselect('/geo/city', { params: { pname: obj.province } }, document.querySelector('#updateModal [name=city]'), '市', obj.city)
                getselect('/geo/county', { params: { pname: obj.province, cname: obj.city, } }, document.querySelector('#updateModal [name=county]'), '县',obj.county)
            })

    }else if(e.target.classList.contains('del')){
        const id = e.target.dataset.id

        axios.delete('/student/delete',{params:{id,}})
        .then(result=>{
           if(result.data.code===0){
            toastr.success(result.data.message)

            getStudentList()

           }
        })
    }

})


updateform.addEventListener('submit',function(e){
    e.preventDefault()
    const data = $(updateform).serialize()

    axios.put('/student/update',data)
    .then(result=>{
        if(result.data.code===0){
            toastr.success(result.data.message)
            updateform.reset()
            $('#updateModal').modal('hide')

            getStudentList()
        }
    })
})


addform.addEventListener('submit', function (e) {

    e.preventDefault()

    const data = $(addform).serialize()

    axios.post('/student/add', data)
        .then(result => {
            console.log(result);
            if (result.data.code === 0) {
                toastr.success(result.data.message)
                addform.reset()
                $('#addModal').modal('hide')
                getStudentList()
            }
        })
})




initselect('#addModal')
initselect('#updateModal')

function initselect(s) {
    const Provinces = document.querySelector(`${s} [name=province]`);

    const Citys = document.querySelector(`${s} [name=city]`);

    const Countys = document.querySelector(`${s} [name=county]`);



    // axios.get('/geo/province')
    // .then(result=>{
    //     // console.log(result);

    //     const arr = result.data

    //     let province = arr.reduce((p,v)=>{
    //         return p+`
    //         <option value=${v}>${v}</option>
    //         `

    //     },'<option>--省--</option>')

    //     Provinces.innerHTML = province

    // })
    // console.log(Provinces.select.value);

    getselect('/geo/province', {}, Provinces, '省')


    Provinces.addEventListener('change', function (e) {
        //     const params = {
        //         pname:Provinces.value
        //     }
        //     axios.get('/geo/city',{params})
        //     .then(result=>{
        //     console.log(result);
        //     let c =result.data.reduce((c,v)=>{
        //        return c+`
        //        <option value=${v}>${v}</option>
        //        `
        //     },'<option>--市--</option>')

        //     Citys.innerHTML = c


        // })
        getselect('/geo/city', { params: { pname: Provinces.value } }, Citys, '市')

    })

    Citys.addEventListener('change', function (e) {
        //     const params = {
        //         pname:Provinces.value,
        //         cname:Citys.value,
        //     }
        //     axios.get('/geo/county',{params})
        //     .then(result=>{
        //     console.log(result);
        //     let c =result.data.reduce((c,v)=>{
        //        return c+`
        //        <option value=${v}>${v}</option>
        //        `
        //     },'<option>--县--</option>')

        //     Countys.innerHTML = c


        // })

        getselect('/geo/county', { params: { pname: Provinces.value, cname: Citys.value, } }, Countys, '县')

    })
}


function getselect(url, obj, dom, table, value = '') {
    axios.get(url, obj)
        .then(result => {
            console.log(result);
            let c = result.data.reduce((c, v) => {
                return c + `
       <option value=${v}>${v}</option>
       `
            }, `<option>--${table}--</option>`)

            dom.innerHTML = c

            dom.value = value
        })
}


function getStudentList() {
    axios.get('/student/list')
        .then(result => {
            // console.log(result);
            if (result.data.code === 0) {
                const arr = result.data.data
                let html = arr.reduce((h, v) => {
                    return h + `
            <tr>
        <th scope="row">${v.id}</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.truesalary}</td>
        <td>${v.salary}</td>
        <td>${v.province}${v.city}${v.county}</td>
        <td>
          <button type="button" data-id='${v.id}' class="btn btn-primary btn-sm put">修改</button>
          <button type="button" data-id='${v.id}' class="btn btn-danger btn-sm del">删除</button>
        </td>
      </tr>
            `
                }, '')

                tbody.innerHTML = html
            }
        })
}



